<script setup lang="ts">
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import type {FormInstance} from 'element-plus'
import {LoginApi} from "../../api/login/login.ts";
import type {LoginParamsType} from "../../type/login.ts";
import {ElMessage} from "element-plus";
import {Avatar, Lock} from "@element-plus/icons-vue";


const formRef = ref<FormInstance>()
const router = useRouter()

//表单数据
const formData = reactive<LoginParamsType>({
  username: '',
  password: ''
})

//字段验证
/*@ts-ignore*/
const validateLoginPwd = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
/*@ts-ignore*/
const validateLoginId = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}

//验证规则
const rules = reactive({
  password: [{validator: validateLoginPwd, trigger: 'blur'}],
  username: [{validator: validateLoginId, trigger: 'blur'}],
})

//登录
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const {data: res} = await LoginApi.login(formData)
      if (res.code === 200) {
        ElMessage.success(res.msg)
        window.sessionStorage.setItem('token', res.token)
        // 跳转到首页
        await router.push('/back')
      } else {
        ElMessage.error("登录失败")
      }
    }
  })
}

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>
  <div class="login-container">
    <div class="login-warp">
      <div class="login-title">酒店综合管理系统</div>
      <el-form ref="formRef" :model="formData" status-icon :rules="rules" label-width="50px" class="demo-formData">
        <el-form-item label="账号" prop="username">
          <el-input :prefix-icon="Avatar" v-model="formData.username" placeholder="请输入账号" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input :prefix-icon="Lock" v-model="formData.password" type="password" placeholder="请输入密码"
                    autocomplete="off"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">登录
          </el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #142334, #6894c7);
  display: flex;
  align-items: center;
  justify-content: center;

  .login-title {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 600;
    font-family: xiao;
    color: #fff;
  }

  .login-warp {
    padding: 10px;
    width: 400px;
    height: 250px;
    border: 1px solid #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .demo-formData {
      width: 100%;

      ::v-deep .el-form-item__label {
        color: #fff;
      }
    }
  }
}

@font-face {
  font-family: 'xiao';
  src: url('../../assets/fonts/xiamorelianbingqilin.ttf')
}
</style>
